<template>
	<div align="center">
		<div align="center">
			<el-input v-model="name" placeholder="请输入优惠券标题" style="width:300px"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
			<el-select v-model="type" placeholder="请选择优惠券类型">
				<el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>&nbsp;&nbsp;&nbsp;&nbsp;
			<el-select v-model="status" placeholder="请选择优惠券状态">
				<el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>&nbsp;&nbsp;&nbsp;&nbsp;
			<el-button @click="list()" type="primary" size="small">查询</el-button>
			<el-button type="primary" @click="addBean" size="small">添加</el-button><br />

		</div><br /><br />

		<el-table :data="couponList" border style="width: 100%">
			<el-table-column prop="id" label="优惠券ID" width="50"></el-table-column>
			<el-table-column prop="name" label="优惠券名称" width="100"></el-table-column>
			<el-table-column prop="desc" label="介绍" width="100"></el-table-column>
			<el-table-column prop="tag" label="标签" width="100"></el-table-column>
			<el-table-column prop="min" label="最低消费" width="100"></el-table-column>
			<el-table-column prop="discount" label="满减金额" width="100"></el-table-column>
			<el-table-column prop="limit" label="每人限领" width="75"></el-table-column>
			<el-table-column prop="goodsType" :formatter="fw" label="商品使用范围" width="100"></el-table-column>
			<el-table-column prop="type" :formatter="lx" label="优惠券类型" width="100"></el-table-column>
			<el-table-column prop="total" label="优惠券数量" width="100"></el-table-column>
			<el-table-column prop="status" :formatter="zt" label="状态" width="100"></el-table-column>
			<el-table-column fixed="right" label="操作" width="250">
				<template slot-scope="scope">
					<el-button @click="look(scope.row)" type="primary" size="small">详情</el-button>
					<el-button @click="upd(scope.row)" type="info">编辑</el-button>
					<el-button @click="del(scope.row)" type="danger">删除</el-button>
				</template>
			</el-table-column>
		</el-table><br /><br />
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pages"
		:page-sizes="[1, 5, 10, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
		<!--分页插件-->
		<!-- <el-pagination @current-change="list" :current-page="pagination.pageNum" :page-count="pagination.pages">
    </el-pagination>-->
		<!-- 分页结束 -->

		<!-- 添加对话框 -->
		<el-dialog title="添加" :visible.sync="addFlag">
			<el-form :model="form">
				<el-form-item label="优惠券名称" :label-width="formLabelWidth" prop="question">
					<el-input v-model="form.name" autocomplete="off" style="width:300px"></el-input>
				</el-form-item>
				<el-form-item label="介绍" :label-width="formLabelWidth" prop="answer">
					<el-input v-model="form.desc" autocomplete="off" style="width:300px"></el-input>
				</el-form-item>
				<el-form-item label="标签" :label-width="formLabelWidth" prop="answer">
					<el-input v-model="form.tag" autocomplete="off" style="width:300px"></el-input>
				</el-form-item>
				<el-form-item label="最低消费" :label-width="formLabelWidth" prop="answer">
					<el-input v-model="form.min" autocomplete="off" style="width:300px"></el-input>
				</el-form-item>
				<el-form-item label="满减金额" :label-width="formLabelWidth" prop="answer">
					<el-input v-model="form.discount" autocomplete="off" style="width:300px"></el-input>
				</el-form-item>
				<el-form-item label="每人限领" :label-width="formLabelWidth" prop="answer">
					<el-input v-model="form.limit" autocomplete="off" style="width:300px"></el-input>
				</el-form-item>
				<el-form-item label="商品使用范围" :label-width="formLabelWidth" prop="answer">
					<!-- <el-input v-model="form.goodsType" autocomplete="off" style="width:300px"></el-input> -->
					<el-select v-model="form.goodsType" placeholder="请选择">
						<el-option v-for="item in goodsTypeList" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="优惠券类型" :label-width="formLabelWidth" prop="answer">
					<!-- <el-input v-model="form.type" autocomplete="off" style="width:300px"></el-input> -->
					<el-select v-model="form.type" placeholder="请选择">
						<el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="优惠券数量" :label-width="formLabelWidth" prop="answer">
					<el-input v-model="form.total" autocomplete="off" style="width:300px"></el-input>
				</el-form-item>
				<el-form-item label="状态" :label-width="formLabelWidth" prop="answer">
					<!-- <el-input v-model="form.status" autocomplete="off" style="width:300px"></el-input> -->
					<el-select v-model="form.status" placeholder="请选择">
						<el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="addFlag = false">取 消</el-button>
				<el-button type="primary" @click="add()">确 定</el-button>
			</div>
		</el-dialog>

		<!-- 查看对话框 -->
		<el-dialog title="查看" :visible.sync="dialogFormVisible">
			<el-form :model="form">
				<el-form-item label="优惠券名称" :label-width="formLabelWidth" prop="question" readonly>
					<el-input v-model="form.name" autocomplete="off" style="width:300px" readonly="readonly"></el-input>
				</el-form-item>
				<el-form-item label="介绍" :label-width="formLabelWidth" prop="answer">
					<el-input v-model="form.desc" autocomplete="off" style="width:300px" readonly="readonly"></el-input>
				</el-form-item>
				<el-form-item label="标签" :label-width="formLabelWidth" prop="answer">
					<el-input v-model="form.tag" autocomplete="off" style="width:300px" readonly="readonly"></el-input>
				</el-form-item>
				<el-form-item label="最低消费" :label-width="formLabelWidth" prop="answer">
					<el-input v-model="form.min" autocomplete="off" style="width:300px" readonly="readonly"></el-input>
				</el-form-item>
				<el-form-item label="满减金额" :label-width="formLabelWidth" prop="answer">
					<el-input v-model="form.discount" autocomplete="off" style="width:300px" readonly="readonly"></el-input>
				</el-form-item>
				<el-form-item label="每人限领" :label-width="formLabelWidth" prop="answer">
					<el-input v-model="form.limit" autocomplete="off" style="width:300px" readonly="readonly"></el-input>
				</el-form-item>
				<el-form-item label="商品使用范围" :label-width="formLabelWidth" prop="answer">
					<!-- <el-input v-model="form.goodsType" autocomplete="off" style="width:300px"></el-input> -->
					<el-select v-model="form.goodsType" placeholder="请选择" disabled>
						<el-option v-for="item in goodsTypeList" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="优惠券类型" :label-width="formLabelWidth" prop="answer">
					<!-- <el-input v-model="form.type" autocomplete="off" style="width:300px"></el-input> -->
					<el-select v-model="form.type" placeholder="请选择" disabled>
						<el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="优惠券数量" :label-width="formLabelWidth" prop="answer">
					<el-input v-model="form.total" autocomplete="off" style="width:300px" readonly="readonly"></el-input>
				</el-form-item>
				<el-form-item label="状态" :label-width="formLabelWidth" prop="answer">
					<!-- <el-input v-model="form.status" autocomplete="off" style="width:300px"></el-input> -->
					<el-select v-model="form.status" placeholder="请选择" disabled>
						<el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="创建时间" :label-width="formLabelWidth" prop="answer">
					<el-input v-model="form.addTime" autocomplete="off" style="width:300px" readonly="readonly"></el-input>
				</el-form-item>
				<el-form-item label="修改时间" :label-width="formLabelWidth" prop="answer">
					<el-input v-model="form.updateTime" autocomplete="off" style="width:300px" readonly="readonly"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
			</div>
		</el-dialog>
		<!-- 修改对话框 -->
		<el-dialog title="修改" :visible.sync="updFlag">
			<el-form :model="form">
				<el-form-item label="优惠券名称" :label-width="formLabelWidth" prop="question">
					<el-input v-model="form.name" autocomplete="off" style="width:300px"></el-input>
				</el-form-item>
				<el-form-item label="介绍" :label-width="formLabelWidth" prop="answer">
					<el-input v-model="form.desc" autocomplete="off" style="width:300px"></el-input>
				</el-form-item>
				<el-form-item label="标签" :label-width="formLabelWidth" prop="answer">
					<el-input v-model="form.tag" autocomplete="off" style="width:300px"></el-input>
				</el-form-item>
				<el-form-item label="最低消费" :label-width="formLabelWidth" prop="answer">
					<el-input v-model="form.min" autocomplete="off" style="width:300px"></el-input>
				</el-form-item>
				<el-form-item label="满减金额" :label-width="formLabelWidth" prop="answer">
					<el-input v-model="form.discount" autocomplete="off" style="width:300px"></el-input>
				</el-form-item>
				<el-form-item label="每人限领" :label-width="formLabelWidth" prop="answer">
					<el-input v-model="form.limit" autocomplete="off" style="width:300px"></el-input>
				</el-form-item>
				<el-form-item label="商品使用范围" :label-width="formLabelWidth" prop="answer">
					<!-- <el-input v-model="form.goodsType" autocomplete="off" style="width:300px"></el-input> -->
					<el-select v-model="form.goodsType" placeholder="请选择">
						<el-option v-for="item in goodsTypeList" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="优惠券类型" :label-width="formLabelWidth" prop="answer">
					<!-- <el-input v-model="form.type" autocomplete="off" style="width:300px"></el-input> -->
					<el-select v-model="form.type" placeholder="请选择">
						<el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="优惠券数量" :label-width="formLabelWidth" prop="answer">
					<el-input v-model="form.total" autocomplete="off" style="width:300px"></el-input>
				</el-form-item>
				<el-form-item label="状态" :label-width="formLabelWidth" prop="answer">
					<!-- <el-input v-model="form.status" autocomplete="off" style="width:300px"></el-input> -->
					<el-select v-model="form.status" placeholder="请选择">
						<el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="updFlag = false">取 消</el-button>
				<el-button type="primary" @click="update()">确 定</el-button>
			</div>
		</el-dialog>

	</div>
</template>

<script>
import axios from "axios";

	var quan;
	var data4Vue = {
		couponList: [],
		total: 0,
		pages: 1,
		pageSize: 5,
		name: "",
		typeList: [{
				value: "0",
				label: "通用券，用户领取"
			},
			{
				value: "1",
				label: "注册赠券"
			},
			{
				value: "2",
				label: "优惠券码兑换"
			}
		],
		type: "",
		status: "",
		statusList: [{
				value: "0",
				label: "正常使用"
			},
			{
				value: "1",
				label: "过期"
			},
			{
				value: "2",
				label: "下架"
			}
		],
		goodsTypeList: [{
				value: "0",
				label: "全商品"
			},
			{
				value: "1",
				label: "类目限制"
			},
			{
				value: "2",
				label: "商品限制"
			}
		],
		goodsType: "",
		dialogFormVisible: false,
		form: {},
		formLabelWidth: '120px',
		updFlag: false,
		addFlag: false
	};

	export default {
		name: "Coupon",
		props: {
			msg: String
		},
		data: function() {
			return data4Vue;
		},
		mounted: function() {
			quan = this;
			this.list();
		},
		methods: {
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pageSize = val;
				this.list();
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.pages = val;
				this.list();
			},
			list() {

				axios({
					method: "get",
					url: "http://localhost:8085/ecCoupon/conponList",
					params: {
						pageNum: quan.pages,
						pageSize: quan.pageSize,
						name: quan.name,
						type: quan.type,
						status: quan.status
					}
				}).then(function(res) {
					quan.couponList = res.data.obj.list;
					quan.total = res.data.obj.total;
					console.log(quan.couponList);
				});
			},
			zt: function(bean) {
				if (bean.status == 0) {
					return "正常使用";
				} else if (bean.status == 1) {
					return "过期";
				} else if (bean.status == 2) {
					return "过期";
				}
			},
			lx: function(bean) {
				if (bean.type == 0) {
					return "通用券，用户领取";
				} else if (bean.type == 1) {
					return "注册赠券";
				} else if (bean.type == 2) {
					return "优惠券码兑换";
				}
			},
			fw: function(bean) {
				if (bean.goodsType == 0) {
					return "全商品";
				} else if (bean.goodsType == 1) {
					return "类目限制";
				} else if (bean.goodsType == 2) {
					return "商品限制";
				}
			},
			addBean: function() {
				quan.addFlag = true;
				for (var i in quan.form) {
					quan.form[i] = null;
				}
			},
			add: function() {
				axios.post("http://localhost:8085/ecCoupon/addCoupon", quan.form).then(function(res) {
					if (res.data.code == 200) {
						alert("添加成功");
						quan.addFlag = false;
						quan.list();
					} else {
						alert("添加失败");
					}
				})
			},
			del: function(bean) {
				axios.get("http://localhost:8085/ecCoupon/delCoupon?id=" + bean.id).then(function(res) {
					if (res.data.code == 200) {
						alert("删除成功");
						quan.list();
					} else {
						alert("删除失败");
					}
				})
			},
			look: function(bean) {
				axios.get("http://localhost:8085/ecCoupon/getCoupon?id=" + bean.id).then(function(res) {
					quan.form = res.data.obj;
					quan.dialogFormVisible = true;
				})
			},
			upd: function(bean) {
				axios.get("http://localhost:8085/ecCoupon/getCoupon?id=" + bean.id).then(function(res) {
					quan.form = res.data.obj;
					quan.updFlag = true;
				})
			},
			update: function() {
				axios.post("http://localhost:8085/ecCoupon/updCoupon", quan.form).then(function(res) {
					if (res.data.code == 200) {
						alert("修改成功");
						quan.updFlag = false;
						quan.list();

					} else {
						alert("修改失败");
					}
				})
			}
		}
	};
</script>

<style scoped>
</style>
